<template>
  <div class="commend-panel">
    <div
      class="carousel-panel"
      :style="{
        width: carouselWidth + 'px',
        height: carouselWidth * 0.6 + 'px'
      }"
    >
      <el-carousel
        trigger="click"
        :height="carouselWidth * 0.6 + 'px'"
        indicator-position="none"
        arrow="never"
        @change="carouselChange"
        ref="carouselRef"
      >
        <el-carousel-item
          v-for="(item, index) in carouselVideoList"
          :key="item.categoryId"
          :name="index + ''"
        >
          <div class="roll-image">
            <router-link :to="`/video/${item.videoId}`" target="_blank">
              <img :src="`${homeStore.sourcePath}${item.videoCover}`" alt="" />
            </router-link>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="carousel-bottom">
        <div class="name-op">
          <router-link
            class="video-name"
            target="_blank"
            :to="`/video/${carouselVideoList[carouselIndex]?.videoId}`"
          >
            {{ carouselVideoList[carouselIndex]?.videoName }}
          </router-link>
          <div class="change-btn">
            <span class="iconfont icon-right" @click="preCarousel"></span>
            <span class="iconfont icon-left" @click="nextCarousel"></span>
          </div>
        </div>
        <div class="dtos">
          <div
            :class="['dto-item', carouselIndex == item - 1 ? 'active' : '']"
            v-for="item in carouselVideoList.length"
            :key="item"
            @click="setCarousel(item)"
          ></div>
        </div>
      </div>
    </div>
    <div class="video-list">
      <div v-for="item in commendVideoList" :key="item.categoryId">
        <VideoItem :data="item" />
      </div>
    </div>
  </div>
  <VideoList></VideoList>
</template>

<script setup lang="ts">
import VideoList from '../videoList/VideoList.vue'
import { onMounted, onUnmounted, ref } from 'vue'
import { useHomeStore } from '@/stores/home'
import { mitter } from '@/eventbus/eventBus'
import { recommendVideoHttpRequest, type VideoInfo } from '@/services/api/home'
import VideoItem from '@/components/VideoItem.vue'

const homeStore = useHomeStore()

const carouselWidth = ref<number>(0)
// 左边的推荐视频列表
const carouselVideoList = ref<VideoInfo[]>([])
//截取之后剩下的推荐视频列表
const commendVideoList = ref<VideoInfo[]>([])

//获取首页推荐视频列表
const loadRecommendVideo = async () => {
  const res = await recommendVideoHttpRequest()
  if (!res.data) {
    return
  }
  const allVideoList = res.data
  //默认展示 5个其余的在右边显示
  if (allVideoList.length > homeStore.carouseMaxCount) {
    carouselVideoList.value = allVideoList.slice(0, homeStore.carouseMaxCount)
    //homeStore.carouseMaxCount +6 最多让他展示6个
    commendVideoList.value = allVideoList.slice(
      homeStore.carouseMaxCount,
      homeStore.carouseMaxCount + 6
    )
    console.log(allVideoList)
  } else {
    carouselVideoList.value = res.data
  }
}
loadRecommendVideo()

const carouselIndex = ref(0)
//点击轮播图时的触发方法
const carouselChange = (e: any) => {
  carouselIndex.value = e
}

const resetCarouseWidth = () => {
  let width = (document.documentElement.clientWidth - homeStore.bodyPadding * 2) * 0.4218
  if (width < 400) {
    width = 400
  }
  carouselWidth.value = width
}

const carouselRef = ref()

//下一张图片
const nextCarousel = () => {
  carouselRef.value.next()
}
// 上一张图片
const preCarousel = () => {
  carouselRef.value.prev()
}

const setCarousel = (index: any) => {
  carouselRef.value.setActiveItem(index - 1 + '')
}

onMounted(() => {
  mitter.on('windowResize', () => {
    resetCarouseWidth()
  })
  resetCarouseWidth()
})

onUnmounted(() => {
  mitter.off('windowResize')
})
</script>

<style lang="less" scoped>
.commend-panel {
  display: flex;
  margin-top: 20px;
  .carousel-panel {
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    .roll-image {
      position: relative;
      background: #e9e9e9;
      text-align: center;
      a {
        display: block;
      }
      img {
        max-width: 100%;
      }
    }
  }
  .carousel-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 65px;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px;
    .name-op {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .video-name {
        flex: 1;
        color: #fff;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
      }
      .change-btn {
        margin-left: 10px;
        width: 60px;
        display: flex;
        justify-content: space-between;
        .iconfont {
          cursor: pointer;
          width: 25px;
          text-align: center;
          line-height: 25px;
          font-size: 20px;
          background-color: rgba(255, 255, 255, 0.1);
          border-radius: 5px;
          color: #fff;
        }
      }
    }
    .dtos {
      display: flex;
      margin-top: 5px;
      align-items: center;
      .dto-item {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #b0b0b0;
        cursor: pointer;
        margin-right: 10px;
      }
      .active {
        width: 15px;
        height: 15px;
        background-color: #fff;
      }
    }
  }
  .video-list {
    margin-left: 10px;
    flex: 1;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>
